<template>
	<!-- 宫格组件 -->
	<!-- showBorder：宫格项是否显示边框 -->
	<!-- square：宫格项是否显示为方形 -->
	<uni-grid :column="2" show-border :square="false">
		<!-- 一个宫格项1 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/property-fee/property-fee')">
				<image src="../../static/img/rmb.png" mode="widthFix"/>
				<text>缴费</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项2 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<image src="../../static/img/parking.png" mode="widthFix"/>
				<text>车位</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项3 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<image src="../../static/img/sound.png" mode="widthFix"/>
				<text>物业公告</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项4 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<image src="../../static/img/phone.png" mode="widthFix"/>
				<text>联系物业</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项5 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<image src="../../static/img/tools.png" mode="widthFix"/>
				<text>报修</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项6 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<image src="../../static/img/mail.png" mode="widthFix"/>
				<text>投诉建议</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项7 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<image src="../../static/img/category.png" mode="widthFix"/>
				<text>其它</text>
			</view>
		</uni-grid-item>
		<!-- 一个宫格项8 -->
		<uni-grid-item>
			<view class="item" @click="jump('/pages/feePay/feePay')">
				<text style="font-size: 2.5rem; padding: 32rpx  0;">...</text>
			</view>
		</uni-grid-item>
	</uni-grid>
</template>

<script>
	export default {
		methods: {
			jump(url){
				uni.navigateTo({		//导航跳转到“缴费列表”页
					url
				}) 
			}
		}
	}
</script>

<style scoped lang="scss">
.item {
	flex-direction: column; //弹性容器主轴方向：纵向
	justify-content: center; //子元素在主轴方向上：居中
	align-items: center; //子元素在交叉轴方向上：居中
	padding: $uni-spacing-col-lg*2  0;//上下方向上的内边距
	//当前元素被点击时的样式
	&:active {
		opacity: .6; 
	}
	image {
		width: 35%;//宽度
	}
	text {
		font-size: $uni-font-size-base;
	}
}
</style>
